<template>
  <div style="height: 6vh; background-color:#fff;padding: 10px 20px;">
    <span style="line-height: 60px;font-size: 20px;">用户管理</span>
    <el-button type="primary" @click="showDialog" style="float: right;margin-top: 13px">新增用户</el-button>
  </div>
  <div>
    <el-dialog
        :title="dialogTitle"
        v-model="dialogVisible"
        style="width: 1000px;padding: 40px"
        :before-close="handleClose"
    >
      <el-form
          label-width="auto"
          :model="user"
          label-position="top"
          style="max-width: 1000px"
      >
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="用户名">
              <el-input :disabled="saveUserForm.id" v-model="saveUserForm.username"/>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="saveUserForm.email"/>
            </el-form-item>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="职位">
                  <el-select
                      @change="loadLeader"
                      v-model="saveUserForm.level"
                      placeholder="请选择"
                      size="large"
                      style="width: 240px"
                  >
                    <el-option
                        v-for="item in leveOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="直属领导">
                  <el-select
                      v-model="saveUserForm.parentId"
                      placeholder="请选择"
                      size="large"
                      style="width: 240px"
                  >
                    <el-option
                        v-for="item in leaderOption"
                        :key="item.id"
                        :label="item.username"
                        :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input v-model="saveUserForm.phone"/>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="saveUserForm.age"/>
            </el-form-item>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="性别">
                  <el-radio-group v-model="saveUserForm.gender">
                    <el-radio style="margin-right: 8px" value="1" size="large" border>男</el-radio>
                    <el-radio value="0" size="large" border>女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户状态">
                  <el-radio-group v-model="saveUserForm.status">
                    <el-radio style="margin-right: 8px" value="1" size="large" border>启用</el-radio>
                    <el-radio value="0" size="large" border>禁用</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>


      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="saveUser">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <el-card style="margin: 20px; height: 70px">
    <el-form :inline="true">
      <el-form-item label="用户名">
        <el-input placeholder="请输入用户名" v-model="searchUserForm.username" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="用户状态" style="width: 290px">
        <el-select v-model="searchUserForm.status" placeholder="请选择用户状态" @change="loadUser">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @keydown.enter="loadUser" @click="loadUser">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin: 20px">
    <el-table :data="userArr">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="username" label="用户名" align="center"></el-table-column>
      <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
      <el-table-column prop="createTime" label="加入时间" align="center"></el-table-column>
      <el-table-column prop="status" label="用户状态" align="center">
        <template #default="scope">
          <el-switch @change="changeStatus(scope.row.id, scope.row.status)" active-value="1" inactive-value="0" v-model="scope.row.status" :disabled="scope.row.level==40"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button :disabled="scope.row.level == 40" @click="resetPassword(scope.row.id)" link type="primary" size="small">密码重置</el-button>
          <el-button :disabled="scope.row.level == 40" @click="editUser(scope.row.id)" link type="primary" size="small">编辑</el-button>
          <el-button :disabled="scope.row.level == 40" @click="delUser(scope.row.id)" link type="primary" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>

import {onMounted, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import qs from 'qs'; // 引入qs库用于序列化查询参数
import axios from "axios";

const dialogVisible = ref(false)
const dialogTitle = ref('新建用户');
const user = ref({});
const saveUserForm = ref({
  username: '',
  phone: '',
  email: '',
  age: '',
  level: '',
  parentId: '',
  gender: '',
  status: ''
})
const leveOptions = ref([
  {label: '职员', value: '10'},
  {label: '经理', value: '20'},
  {label: '总监', value: '30'},
])
const leaderOption = ref([
  // {username: 'shaoyun', id: '1'},
  // {username: 'mike', id: '2'},
])
const value = ref('')

const delUser = (userId) => {
  if(confirm('您确认要删除该用户吗?')){
    // axios.post(BASE_URL + '/v1/user/delete/'+userId)
    //     .then((response) => {
    //       if ((response.data.code == 2000)){
    //         ElMessage.success('删除成功')
    //         loadUser();
    //       }else {
    //         ElMessage.error(response.data.msg)
    //       }
    //     })
  }
}
const changeStatus = (userId,status) =>{
  console.log(userId,status)
  // axios.post((BASE_URL+'/v1/user/update/status/' + userId + '/' +status))
  //     .then((response) => {
  //       if (response.data.code == 2000){
  //         ElMessage.success('修改成功')
  //       }else {
  //         ElMessage.error(response.data.msg)
  //         user.status = !user.status
  //       }
  //     })
}

const showDialog = () => {
  dialogTitle.value = "新增用户"
  dialogVisible.value = !dialogVisible.value
}
const editUser = (id) => {
  dialogTitle.value = "修改用户"
  dialogVisible.value = !dialogVisible.value;
  // axios.get(BASE_URL + '/v1/user/select?id=' + id)
  //     .then((response) => {
  //       if (response.data.code == 2000){
  //         saveUserForm.value = response.data.data[0]
  //         let level = parseInt(saveUserForm.value.level)+10
  //         axios.get(BASE_URL+ '/v1/user/select?level='+level)
  //             .then((response) => {
  //               if (response.data.code == 2000){
  //                 leaderOption.value = response.data.data
  //               }else {
  //                 ElMessage.error(response.data.msg)
  //               }
  //             })
  //       }else {
  //         ElMessage.error(response.data.msg)
  //       }
  //     })
}
const resetPassword = (userId) => {
  // axios.get(BASE_URL+'/v1/user/update/password/' + userId)
  //     .then((response) => {
  //       if (response.data.code == 2000){
  //         ElMessage.success("密码重置成功，新密码: admin123")
  //       }
  //     })
}
const loadLeader = () =>{
  leaderOption.value = [];
  saveUserForm.value.parentId=''
  let level = parseInt(saveUserForm.value.level)+10
  // axios.get(BASE_URL + '/v1/user/select?level=' + level)
  //     .then((response) => {
  //       if (response.data.code == 2000){
  //         leaderOption.value = response.data.data
  //       } else {
  //         ElMessage.error(response.data.msg)
  //       }
  //     })
}
const saveUser = () => {
  // axios.post(BASE_URL + '/v1/user/save', saveUserForm.value)
  //     .then((response) => {
  //       if (response.data.code == 2000) {
  //         ElMessage.success("保存成功")
  //         dialogVisible.value = false;
  //         saveUserForm.value = {}
  //         loadUser();
  //       } else {
  //         ElMessage.error(response.data.msg)
  //       }
  //     })
}
const handleClose = () => {
  ElMessageBox.confirm(
      '确认要关闭吗?',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '成功关闭窗口',
        })
        dialogVisible.value = false
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消关闭窗口',
        })
      })
}
const userArr = ref([]);
const searchUserForm = ref({username:'',status:''})

const loadUser = () => {
  let date = qs.stringify(searchUserForm.value)
  // axios.get(BASE_URL + '/v1/user/select?' + date)
  //     .then((response) => {
  //       if (response.data.code == 2000){
  //         userArr.value = response.data.data
  //       }else {
  //         ElMessage.error(response.data.msg)
  //       }
  //     })
}
onMounted(() => {
  loadUser()
})
const resetSearch = () => {
  searchUserForm.value = {}
  loadUser();
}
</script>

<style scoped>

</style>
